<template>
  <Card class="baseBox">
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 4 }"
      :data-source="nodeList"
    >
      <template #renderItem="{ index, item }">
        <a-list-item v-if="index == 0">
          <div class="add" @click="add">
            <img src="@/assets/system/icon1.png" alt="" />
            <p>新增节点</p>
          </div>
        </a-list-item>
        <a-list-item v-else>
          <div class="listItem">
            <p class="top">
              <span>节点名称：</span>
              <span>{{ item.name }}</span>
            </p>
            <div class="center">
              <p>
                <span>服务器地址：</span>
                <span>{{ item.ip }}</span>
              </p>
            </div>
            <div class="bottom">
              <a-popconfirm
                title="是否删除？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="del(item)"
              >
                <img src="@/assets/system/icon2.png" alt="" />
              </a-popconfirm>
              <img src="@/assets/system/icon3.png" alt="" @click="edit(item)" />
            </div>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </Card>
  <!-- 新增/修改 -->
  <Edit v-model:visible="editVisible" :tempData="selectInfo" @reload="reload" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Card from "@/components/Card";
import Edit from "./Edit";
import { nodeApi } from "@/api/node";

const nodeList = ref([{}]);
const selectInfo = ref({});

const editVisible = ref(false);

onMounted(() => {
  getData();
});

async function getData(page = 1) {
  const result = await nodeApi.page({
    page_size: 10,
    current_page: page,
  });
  const { list } = result;
  nodeList.value.push(...list);
}

function add() {
  selectInfo.value = {};
  editVisible.value = true;
}
function edit(item) {
  selectInfo.value = item;
  editVisible.value = true;
}
async function del(item) {
  const { id } = item;
  await nodeApi.delete({ id });

  nodeList.value = nodeList.value.filter((i) => i.id != id);
  reload();
}
function reload() {
  nodeList.value = []
  getData();
}
</script>

<style lang="less" scoped>
.add {
  background: #f5f7fa;
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    height: 80px;
    width: 80px;
  }
  p {
    margin-top: 30px;
    color: #8e98a7;
    font-size: 18px;
  }
}
.listItem {
  height: 30vh;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top {
    color: #132240;
    font-weight: bold;
    padding: 5px 20px;
  }
  .center {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 5px 20px;
    span:first-child {
      color: #8e98a7;
      font-size: 14px;
    }
    span:last-child {
      color: #132240;
      font-size: 14px;
    }
  }
  .bottom {
    padding: 5px 20px;
    display: flex;
    justify-content: space-around;
    img {
      height: 20px;
      width: 20px;
    }
  }
}
</style>
